import React, { useEffect, useState } from "react";
import {
    Flex,
    Box,
    Image,
    Center,
    Input,
    Link,
    Divider,
} from "@chakra-ui/react";
import drawer from "@/assets/img/drawer.png";
import logo from "@/assets/img/logo.png";
import tab_1 from "@/assets/img/tab_1.png";
import tab_2 from "@/assets/img/tab_2.png";
import tab_3 from "@/assets/img/tab_3.png";
import tab_4 from "@/assets/img/tab_4.png";
import tab_5 from "@/assets/img/tab_5.png";
import tab_6 from "@/assets/img/tab_6.png";
import tab_7 from "@/assets/img/tab_7.png";
import tab_8 from "@/assets/img/tab_8.png";

import { Drawer } from "antd";
import { useRouter } from "next/router";
import { connect } from "react-redux";
import storage from "@/utils/storage";
import { useAccount } from "wagmi";


import { useTranslation } from 'react-i18next';

const Header = ({ walletAddress }: any) => {
    const { t, i18n } = useTranslation();
    const [isOpen, setIsOpen] = useState(false);
    const [showLang, setShowLang] = useState(false)
    const { address, isConnected, isDisconnected }: Account = useAccount();
    const router = useRouter()
    const headerAddreaa = address || walletAddress || storage.localGet('address')

    const addressLeft = headerAddreaa && headerAddreaa.slice(0, 15)
    const addressRight = headerAddreaa && headerAddreaa.slice(-5)
    const newAddress = addressLeft + '...' + addressRight

    const onOpen = () => {
        setIsOpen(!isOpen);
    };

    useEffect(() => {

        // 钱包断开重定向
        if (isDisconnected || !address) {
            router.push('/')
        }
    }, [isDisconnected, address])

    const tabList = [
        { title: t('header.Home'), img: tab_1.src, id: 1, url: '/product' },
        { title: t('header.Mine'), img: tab_2.src, id: 2, url: '/person' },
        { title: t('header.Swap'), img: tab_3.src, id: 3, url: '/exchange' },
        { title: t('header.Notice'), img: tab_4.src, id: 4, url: '/notice' },
        { title: t('header.NFT'), img: tab_5.src, id: 5, url: undefined },
        { title: t('header.Fund'), img: tab_6.src, id: 6, url: undefined },
        { title: t('header.About'), img: tab_7.src, id: 7, url: undefined },
        { title: t('header.Language'), img: tab_8.src, child: ['中文', 'English'], id: 8, url: undefined },
    ];

    const gotoUrl = (url: any) => {
        if (url) {
            router.push(url)
            onOpen()
        }
    }

    const handleLang = (name: string) => {
        if (name === t('header.Language')) setShowLang(!showLang)
    }

    const changeLang = (lang: string) => {
        i18n.changeLanguage(lang)
    }

    return (
        <Box position={'fixed'} w={'100%'} zIndex={999}>
            <Box p={"20px 20px"} bgColor="#ecf9ff">
                <Flex justify={"space-between"}>
                    <Image src={logo.src} alt="logo" w={100} h={30}></Image>
                    <Center>
                        <Input
                            value={newAddress}
                            w={175}
                            h={30}
                            p={"0px 9px"}
                            m={"0 9px"}
                            borderRadius={6}
                            border={0}
                            bgColor={'#fff'}

                            disabled
                        />
                        <Image
                            src={drawer.src}
                            alt="drawer"
                            w={18}
                            h={18}
                            onClick={onOpen}
                        ></Image>
                    </Center>
                </Flex>
            </Box>

            <Drawer open={isOpen} onClose={onOpen} width={"45%"} closable={false}>
                <Box pt={50}>
                    {tabList && tabList.map(item =>
                        <Flex key={item.id} m={'16px 0px'} h={28} lineHeight={'28px'} justify={''} align="center" onClick={() => gotoUrl(item.url)}>
                            <Image src={item.img} w={18} h={18} alt="tab_item"></Image>
                            <Link fontSize={15} ml={20} color={'#40414D'} onClick={() => { handleLang(item.title) }}>{item.title}</Link>
                        </Flex>
                    )}
                    {
                        showLang && (

                            <Box ml={35} style={{ transition: "all 0.2s" }}>
                                <Box onClick={() => changeLang('zh')}>
                                    <Link color={'#8C8C8C'}>中文</Link>
                                </Box>
                                <Divider />
                                <Box onClick={() => changeLang('en')}>
                                    <Link color={'#8C8C8C'}>English</Link>
                                </Box>
                            </Box>
                        )
                    }

                </Box>


            </Drawer >
        </Box >
    );
};

export default connect(({ walletAddress }) => ({ walletAddress }))(Header);
